<!-- path: -->
<script setup>
import { ref, onMounted } from 'vue'

import bili_tuijian1 from "../../../../public/images/my/bili_tuijian1.webp"
import bili_tuijian2 from "../../../../public/images/my/bili_tuijian2.webp"
import bili_tuijian3 from "../../../../public/images/my/bili_tuijian3.webp"
import bili_tuijian4 from "../../../../public/images/my/bili_tuijian4.webp"
import bili_tuijian5 from "../../../../public/images/my/bili_tuijian5.webp"
import csdn_tuijian1 from "../../../../public/images/my/csdn_tuijian1.png"
import csdn_tuijian2 from "../../../../public/images/my/csdn_tuijian2.png"
import csdn_tuijian3 from "../../../../public/images/my/csdn_tuijian3.png"
import csdn_tuijian4 from "../../../../public/images/my/csdn_tuijian4.png"
import csdn_tuijian5 from "../../../../public/images/my/csdn_tuijian5.png"
import taobao_tuijian1 from "../../../../public/images/my/taobao_tuijian1.webp"
import taobao_tuijian2 from "../../../../public/images/my/taobao_tuijian2.webp"
import taobao_tuijian3 from "../../../../public/images/my/taobao_tuijian3.webp"

import zhanzhangDetail1 from "../../../components/zhanzhangDetail1.vue"

const myDetail1 = ref("2020年XR还能当主力吗?XR视频体验【学生党/手机体验】")
const myDetail2 = ref("哈尔滨之旅（其一）- 伏尔加庄园（1）")
const myDetail3 = ref("原神剧情4.2-罪人舞步旋(芙芙身份揭露)")
const myDetail4 = ref("【iPad Air4】第一台平板，就来聊聊了")
const myDetail5 = ref("春节活动+扩充+八重霞语音【崩坏三】")
const myDetail6 = ref("ArkTS初学(一)")
const myDetail7 = ref("flutter学习之旅(一)")
const myDetail8 = ref("RH1288V3 - 初识物理服务器")
const myDetail9 = ref("golang链接mysql")
const myDetail10 = ref("嵌入式linux之旅 -LED灯")
const myDetail11 = ref("2023 i5/i713代CPU RTX4060 16G显卡 1TB固态 电脑主机")
const myDetail12 = ref("3D模型制作")
const myDetail13 = ref("用前端来编写桌面端应用的项目")

const linkUrl1 = "https://www.bilibili.com/video/BV1wV411C7eg/"
const linkUrl2 = "https://www.bilibili.com/video/BV1Tu4y1s7UY/"
const linkUrl3 = "https://www.bilibili.com/video/BV1Zw411s7a5/"
const linkUrl4 = "https://www.bilibili.com/video/BV1Zf4y1W7BS/"
const linkUrl5 = "https://www.bilibili.com/video/BV1PJ41147MV/"
const linkUrl6 = "https://blog.csdn.net/yasinawolaopo/article/details/128850911"
const linkUrl7 = "https://blog.csdn.net/yasinawolaopo/article/details/129932216"
const linkUrl8 = "https://blog.csdn.net/yasinawolaopo/article/details/132391128"
const linkUrl9 = "https://blog.csdn.net/yasinawolaopo/article/details/130947562"
const linkUrl10 = "https://blog.csdn.net/yasinawolaopo/article/details/130636746"
const linkUrl11 = "https://item.taobao.com/item.htm?spm=a21n57.1.0.0.5785523cifGNqt&id=737388851304&ns=1&abbucket=17#detail"
const linkUrl12 = "https://item.taobao.com/item.htm?spm=a1z10.1-c.w137644-24824854233.27.1a6376f2Jy8JWU&id=737152813631"
const linkUrl13 = "https://item.taobao.com/item.htm?spm=2013.1.20141001.2.2e774d4eeQLiqK&id=708884403268&scm=1007.12144.97955.42296_0_0&pvid=7663ec15-d83d-4eb4-96d8-2f1e7350b3d7&utparam=%7B%22x_hestia_source%22%3A%2242296%22%2C%22x_object_type%22%3A%22item%22%2C%22x_hestia_subsource%22%3A%22default%22%2C%22x_mt%22%3A5%2C%22x_src%22%3A%2242296%22%2C%22x_pos%22%3A2%2C%22wh_pid%22%3A-1%2C%22x_pvid%22%3A%227663ec15-d83d-4eb4-96d8-2f1e7350b3d7%22%2C%22scm%22%3A%221007.12144.97955.42296_0_0%22%2C%22x_object_id%22%3A708884403268%7D"
onMounted(()=>{
    
})
const goMasterBiliBili = () => {
    window.location.href = "https://space.bilibili.com/13805897"
}
const goMasterCSDN = () => {
    window.location.href = "https://blog.csdn.net/yasinawolaopo"
}
const goMasterShopStore = () => {
    window.location.href = "https://shop365949409.taobao.com/"
}
</script>

<template>
    <div class="BiliBiliBox">
        <div class="myBiliBili">
            <span @click="goMasterBiliBili()">站长的bilibili账号</span>
        </div>
        <div class="BiliBiliDetail">
            <zhanzhangDetail1 
                :imageUrl="bili_tuijian1"
                :detail="myDetail1"
                :linkUrl="linkUrl1"
            />
            <zhanzhangDetail1 
                :imageUrl="bili_tuijian2"
                :detail="myDetail2"
                :linkUrl="linkUrl2"
            />
            <zhanzhangDetail1 
                :imageUrl="bili_tuijian3"
                :detail="myDetail3"
                :linkUrl="linkUrl3"
            />
            <zhanzhangDetail1 
                :imageUrl="bili_tuijian4"
                :detail="myDetail4"
                :linkUrl="linkUrl4"
            />
            <zhanzhangDetail1 
                :imageUrl="bili_tuijian5"
                :detail="myDetail5"
                :linkUrl="linkUrl5"
            />
        </div>
    </div>
    <div class="CSDNBox">
        <div class="myCSDN">
            <span @click="goMasterCSDN()">站长的CSDN账号</span>
        </div>
        <div class="CSDNDetail">
            <zhanzhangDetail1 
                :imageUrl="csdn_tuijian1"
                :detail="myDetail6"
                :linkUrl="linkUrl6"
            />
            <zhanzhangDetail1 
                :imageUrl="csdn_tuijian2"
                :detail="myDetail7"
                :linkUrl="linkUrl7"
            />
            <zhanzhangDetail1 
                :imageUrl="csdn_tuijian3"
                :detail="myDetail8"
                :linkUrl="linkUrl8"
            />
            <zhanzhangDetail1 
                :imageUrl="csdn_tuijian4"
                :detail="myDetail9"
                :linkUrl="linkUrl9"
            />
            <zhanzhangDetail1 
                :imageUrl="csdn_tuijian5"
                :detail="myDetail10"
                :linkUrl="linkUrl10"
            />
        </div>
    </div>
    <div class="shopBox">
        <div class="myshop">
            <span @click="goMasterShopStore()">站长的店铺</span>
        </div>
        <div class="shopDetail">
            <zhanzhangDetail1 
                :imageUrl="taobao_tuijian1"
                :detail="myDetail11"
                :linkUrl="linkUrl11"
            />
            <zhanzhangDetail1 
                :imageUrl="taobao_tuijian2"
                :detail="myDetail12"
                :linkUrl="linkUrl12"
            />
            <zhanzhangDetail1 
                :imageUrl="taobao_tuijian3"
                :detail="myDetail13"
                :linkUrl="linkUrl13"
            />
        </div>
    </div>
</template>

<style scoped>
.BiliBiliBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30%;
    overflow: hidden;
}
.myBiliBili{
    position: absolute;
    left: 3%;
    top: 0;
    width: 97%;
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.myBiliBili span:hover{
    color: #f00;
}
.BiliBiliDetail,
.CSDNDetail{
    position: absolute;
    left: 0;
    top: 20%;
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    overflow-x: auto;
}
.shopDetail{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 90%;
    height: 80%;
    display: flex;
    align-items: center;
    overflow-x: auto;
}
.CSDNBox{
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: 30%;
}
.myCSDN{
    position: absolute;
    left: 3%;
    top: 0;
    width: 97%;
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.myCSDN span:hover{
    color: #f00;
}
.shopBox{
    position: absolute;
    left: 0;
    top: 60%;
    width: 100%;
    height: 30%;
}
.myshop{
    position: absolute;
    left: 3%;
    top: 0;
    width: 97%;
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.myshop span:hover{
    color: #f00;
}
.shopBox1{
    position: absolute;
    left: 10%;
    top: 16%;
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;

}
.miniTuiJianBox{
    margin-left: 20px;
    margin-right: 20px;
    width: 350px;
    height: 80%;
    border-radius: 10px;
}
.miniImage{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.miniImage img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
}
.detail{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    opacity:0;
    transform: translateY();
    z-index: 3;
}
</style>